<?php
$user_id = $_SESSION['USERID'];

$result = mysql_query("
						SELECT 		`menu_detail`.page_id,
									`menu_detail`.title,
									`menu_detail`.metro_icon,
									`menu_detail`.metro_tile_type
						FROM 		`crystal_users`
						LEFT JOIN   `group` ON `group`.id = `crystal_users`.`group_id`
						LEFT JOIN   `group_permission` ON `group`.id = `group_permission`.`group_id`
						LEFT JOIN   `menu_detail` ON `group_permission`.`page_id` = `menu_detail`.`page_id`
						WHERE 		`crystal_users`.`id` = $user_id AND metro_tile_type != 0
						ORDER BY	`menu_detail`.metro_tile_type DESC
					");

?>

<html>
<head>
		<link href="media/css/main/header.css" rel="stylesheet" type="text/css" />
    	<link href="media/css/main/mainpage.css" rel="stylesheet" type="text/css" />
    	<link href="media/css/main/tooltip.css" rel="stylesheet" type="text/css" />
<script src=""></script>    	
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
 <script >
 var aJaxURL	= "server-side/main.action.php";
	
function chart(){
    $.getJSON(aJaxURL,"act=chart",function(result){
         $('#mytask').html(result.mytask)  ;
         $('#news1').html(result.news)  ;
          //console.log(result.dedline);              
          result.inc.series[0].showInLegend=false;
          result.inc.series[0].type='area';
          result.inc.series[0].name='შემომავალი';
          result.out.series[0].type='area';
          result.out.series[0].name='გამავალი'; 
          result.local.series[0].type='area';
          result.local.series[0].name='შიდა';
          result.service_level.mas[0].type='column';
          result.service_level.mas[0].name='ზარი';
          result.wait_time.series[2].name='მინიმალური';          
          result.wait_time.series[1].name='საშუალო';
          result.wait_time.series[0].name='მაქსიმალური';
          console.log(result.wait_time.series);              
          inc=result.inc; 
          out=result.out;
          local=result.local;
		  $("#incoming_call").html("<p style='text-align: left; font-size: 26px; color: #0052A1; padding: 10px 25px 0;'>"+inc.series[0].data[6]+'</p>' +'<br /><?php echo date('Y-m-d'); ?>');
		  $("#out_call").html("<p style='text-align: left; font-size: 26px; color: #0052A1; padding: 10px 25px 0;'>"+out.series[0].data[6]+'</p>' +'<br /><?php echo date('Y-m-d'); ?>');
		  $("#local_call").html("<p style='text-align: left; font-size: 26px; color: #0052A1; padding: 10px 25px 0;'>"+local.series[0].data[6]+'</p>' +'<br /><?php echo date('Y-m-d'); ?>');
		    $('#incoming_chart').highcharts({
			    xAxis: {categories: result.xAxis,
		    	        labels:{enabled: false}},
			    yAxis: {min: 0, gridLineWidth: 0,
			        title: { text: ''},
			        labels: {enabled: false } },
			    legend: { enabled: false },
			    credits: { enabled: false  },
			    series: inc.series,
			    title: {text: null  }});
			
		  $('#out_chart').highcharts({
			    xAxis: {categories: result.xAxis,
			    	    labels:{enabled: false}},
			    yAxis: {min: 0, gridLineWidth: 0,
			        title: { text: ''},
			        labels: {enabled: false } },
			    legend: { enabled: false },
			    credits: { enabled: false  },
			    series: out.series,
			    title: {text: null  }});
		    
		  $('#service_level').highcharts({
			    xAxis: {categories: result.service_level.call_second,
			    	labels:{enabled: false}},
			    yAxis: {min: 0, gridLineWidth: 0,
			        title: { text: ''},
			        labels: {enabled: false } },
			        legend: {itemStyle: {fontWeight: 'normal'}},
			    credits: { enabled: false  },
			    series: result.service_level.mas,
			    title: {text: null  }});  
		    
		  $('#local_chart').highcharts({
			    xAxis: {categories: result.xAxis,
		    	    labels:{enabled: false}},
			    yAxis: {min: 0, gridLineWidth: 0,
			        title: { text: ''},
			        labels: {enabled: false } },
			    legend: { enabled: false },
			    credits: { enabled: false  },
			    series: local.series,
			    title: {text: null  }});
		    
		  $('#wait_time').highcharts({			  
		        xAxis: {categories: result.wait_time.xAxis,
		        	labels:{enabled: false}},
			    yAxis: {min: 0, gridLineWidth: 0,
			        title: { text: ''},
			        labels: {enabled: false } },
			    legend: {itemStyle: {fontWeight: 'normal'}},
			    credits: { enabled: false  },
			    series: result.wait_time.series,
			    title: {text: null  }});   

		  $(function () {

			    $('#dedline').highcharts({
			        title: {text: ''},
			        xAxis: {
			            categories: result.name,
			            labels: {
			                 rotation: 90,
			                align: 'left'
			               }
			        },

			        yAxis: {
			            categories: result.dedline.xAxis,
			            title: null
			        },

			        colorAxis: {
			            min: 0,
			            max: 20,
			            minColor: '#FFFFFF',
			            maxColor: Highcharts.getOptions().colors[0]
			        },

			        legend: {
			            align: 'right',
			            layout: 'vertical',
			            margin: 0,
			            verticalAlign: 'top',			           
			            symbolHeight: 200
			        },

 			        tooltip: {
			            formatter: function () {
			                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> <br><b>' +
			                    this.point.value + '</b><br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
			            }
			        }, 

			        series: [{
			            type: 'heatmap',
			            name: 'Sales per employee',
			            borderWidth: 1,
			            data: result.dedline.data,
			            dataLabels: {
			                enabled: true,
			                color: 'black',
			                style: {
			                    textShadow: 'none',
			                    HcTextStroke: null
			                }
			            }
			        }]

			    });
			});

      });

    setTimeout(chart, 15000);
	
};
function servise_level(){
	$('#station').load('AsteriskManager/liveState.php')
	$('#flash_panel_all').load('server-side/call/flash_panel_all.action.php'); 
        setTimeout(servise_level, 1000);	
}
servise_level()
chart()
$(document).tooltip();
</script>
 <style type="text/css">
.box{
	
    border-radius: 10px;
  
	

}
#box-table-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	text-align: center;
	border-collapse: collapse;
	border-top: 3px solid #7CB5EC;
	border-bottom: 3px solid #7CB5EC;
	
}
#box-table-b th
{   
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #9CC6F0;
	border-right: 1px solid #9baff1;
	border-left: 1px solid #9baff1;
	color: #039;
}
#box-table-b td
{
width: 25px;
vertical-align: middle;	
padding: 8px;
border-right: 1px solid #7CB5EC;
border-left: 1px solid #7CB5EC;
color: #000;
}
</style>
</head>
<body>
<br />
<br />
<table style="margin: auto;">
    <tr>
        <td class="box"   style="width: 400px; margin: 5px; height: 100px">
            <div class=""  style="float:left; text-align:center; height: 100px; width: 195px;" id="news1"></div>
            <div class=""  style="float:left; text-align:center; height: 100px; width: 195px;" id="mytask"></div>
        </td>
        <td class="box"  style="height: 100px; width: 400px; margin: 5px">
            <div><div>შემომავალი</div>
                <div style="height: 80px; width: 300px; float:left;" id="incoming_chart"></div>
                <div style="height: 100%; width: 100px; float:right; font-size: 16px" id="incoming_call"></div>
            </div>
        </td>
        <td  class="box" style="height: 1000px; width: 421px; margin: 5px;" rowspan="4" > 
               
            <div id="station"></div>
             <br />
            <div style="display: flex;">ყველა ექსთენშენი</div>
            <br />
            <div id="flash_panel_all"></div>         
        </td>
    </tr>
    <tr>
        <td class="box"  style="height: 100px">
            <div  >
               <div> გამავალი</div>
                <div style="height: 80px; width: 300px; float:left;" id="out_chart"></div>
                <div style="height: 100px; width: 100px; float:right; font-size: 16px" id="out_call"></div>
            </div>
        </td>
        <td>
        
                <div>შიდა ზარები</div>
                <div style="height: 80px; width: 300px; float:left;" id="local_chart"></div>
                <div style="height: 100px; width: 100px; float:right; font-size: 16px" id="local_call"></div>
        
        </td>
    </tr>
    <tr>
        <td  class="box"  style="height:300px;">            
         <div>service level</div>
                <div style="height: 280px; width: 100%; float:left;" id="service_level"></div>    
        </td>
        <td class="box">            
           <div> ლოდინის დრო (წმ)</div>
            <div style="height: 280px; width: 100%; float:left;" id="wait_time"></div> 
        </td>
    </tr>
        <tr>
        <td  class="box" style="height: 400px; width: 815px;  margin: 5px;" colspan="2">
            <div>შესრულებული დავალებები (წინა კვირა)  </div>          
            <div id='dedline' style="max-height:350px; height:350px; max-width: 820px">  </div>
        </td>
    </tr>
</table>














  
</body>
</html>
